<template>
  <div>
    <div class="contact-img-box">
      <image class="contact-img" src="/static/images/contact.png" />
    </div>

    <div class="space"> </div>
    <div class="info-item" @click="phone">
      <div class="item-left">
        <image class="img" src="/static/images/phone-active.png" />
        <div class="content">咨询热线: {{base.zixundianhua}}</div>
      </div>
      <div class="item-right" >
        一键拨号
      </div>
    </div>
    <div class="space" > </div>
    <div class="info-item" @click="map">
      <div class="item-left">
        <image class="img" src="/static/images/map.png" />
        <div class="content">地址：{{base.dizhi}}</div>
      </div>
      <div class="item-right">
        一键导航
      </div>
    </div>
    <div class="space"> </div>
    <div class="info-item">
      <div class="item-left">
        <image class="img" src="/static/images/company.png" />
        <div class="content">公司名称：{{base.gsmc}} </div>
      </div>

    </div>
    <div class="space"> </div>
    <div class="info-item">
      <div class="item-left">
        <image class="img" src="/static/images/people.png" />
        <div class="content">联系人：{{base.lianxiren}} </div>
      </div>

    </div>
    <div class="space"> </div>

    <div class="now-order">
      <span class="button" @click="openModal"> 立即预约  </span>
    </div>

    <div v-show="show">
      <order @hide="hideModal"></order>
    </div>

    <Contact :isTab="true"> </Contact>
    <UserTabBar> </UserTabBar>
  </div>
</template>

<script>

  import order from '@/components/order.vue'
  import Contact from '@/components/Contact.vue'
  import UserTabBar from '@/components/UserTabBar.vue'
  export default {
    data() {
      return{
        show: false,
        base: {}
      }
    },

    components: {
      Contact,
      UserTabBar,
      order
    },
    methods:{
      phone(){
        wx.makePhoneCall({
          phoneNumber: this.base.zixundianhua //仅为示例，并非真实的电话号码
        });
      },
      map(){
        wx.openLocation({
          latitude: this.base.latitude,
          longitude: this.base.longitude,
          scale: 18,
          name: this.base.dtsmc,
          address:this.base.dtsdz
        })
      },
      openModal(){
        this.show = true;
      },
      hideModal(){
        this.show = false;
      }
    },
    created() {
      let that = this
      wx.getStorage({
        key: 'base',
        success: function(res) {
            that.base = res.data
        }
      })
    }
  }
</script>


<style scoped>
  .contact-img-box{
    width: 750rpx;
    height: 400rpx;
    overflow: hidden;
  }
.contact-img{
  width: 750rpx;
  height: 400rpx;
}
  .space{
    width: 750rpx;
    height: 10rpx;
    background: #F2EDED;
  }
  .info-item{
    padding:20rpx 10rpx;
    line-height:35rpx;
    font-size: 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .item-left{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex:0 0 80%;

  }
  .item-left .img{
    width: 40rpx;
    height: 40rpx;
    min-width:40rpx;

  }
  .item-left .content{
    padding-left: 8rpx;
  }
  .item-right{
    color: #2B9CDA;
    width: 140rpx;
  }
  .now-order{
    display: flex;
    margin-top: 30rpx;
    justify-content: center;
  }
  .button{

    padding: 10rpx 40rpx;
    background: #2197D8;
    color: #fff;
    border-radius: 10rpx;
  }
</style>
